<template>
  <div class="hello">
<!--    <input-->
<!--        autofocus-->
<!--        type="text" v-model="msg" @input="handleKeyDown">-->
    <p>{{msg}}</p>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: ''
  },
  data() {
    return {
      // msg: ''
    }
  },
  methods: {
    handleKeyDown(event) {
      console.log('handleKeyDown', event)
      const {target} = event
      this.msg = event.target.value.toUpperCase()
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus">
.hello {
  margin-top: 100px
  input {
    font-size: 50px
  }
  font-size: 60px
  color red
}
</style>
